import React, { useState, useCallback, useEffect, useMemo, memo } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import './CitySelector.css';

import CityList from './components/city-section/CityList';
import Suggest from './components/suggest/Suggest';


const CitySelector = memo(function CitySelector (props) {
	const {
		show,
		cityData,
		isLoading,
		onBack,
		fetchCityData,
		onSelect,
	} = props;

	const [searchKey, setSearchKey] = useState('');
	const key = useMemo(() => searchKey.trim(), [searchKey]);

	useEffect(() => {
		if (!show || cityData || isLoading) {
			return
		}

		fetchCityData();
	}, [show, cityData, isLoading]);


	const toAlpha = useCallback(alpha => {
		let alphaDom = document.querySelector(`[data-cate='${alpha}']`);
		if (!alphaDom) return false;
		alphaDom.scrollIntoView();
	}, []);

	//按字母划分的城市列表
	const outputCitySections = () => {
		if (isLoading) {
			return <div>loading</div>
		}

		if (cityData) {
			return (
				<CityList
					sections={cityData.cityList}
					onSelect={onSelect}
					toAlpha={toAlpha}
				/>
			);
			return <div>error</div>;
		}

	}

	return (
		<div className={classnames('city-selector', { hidden: !show })}>
			<div className="city-search">
				<div className="search-back" onClick={() => onBack()}>
					<svg width="42" height="42">
						<polyline
							points="25,13 16,21 25,29"
							stroke="#fff"
							strokeWidth="2"
							fill="none"
						/>
					</svg>
				</div>
				<div className="search-input-wrapper">
					<input
						type='text'
						value={searchKey}
						className="search-input"
						placeholder="城市、车站的中文或拼音"
						onChange={e => setSearchKey(e.target.value)}
					/>
				</div>
				<i
					onClick={() => setSearchKey('')}
					className={classnames('search-clean', {
						hidden: key.length === 0,
					})}
				>
					&#xf063;
                </i>
			</div>
			{Boolean(key) && (
				<Suggest searchKey={key} onSelect={key => onSelect(key)} />
			)}
			{outputCitySections()}
		</div>
	)
})

CitySelector.propTypes = {
	show: PropTypes.bool.isRequired,
	cityData: PropTypes.object,
	isLoading: PropTypes.bool.isRequired,
	onBack: PropTypes.func.isRequired,
	fetchCityData: PropTypes.func.isRequired,
	onSelect: PropTypes.func.isRequired,
}
export default CitySelector;